<template>
	<view class='page_cont'>
		<view class='user_wrap'>
			<view class='desc'>
				<view class='num'>-</view>
				<view class='text'>尚未开通会员</view>
			</view>
			<image class="img" :src="userinfo.businessLogo" mode="aspectFill"></image>
			<view class='desc'>
				<view class='num'>-</view>
				<view class='text'>会员有效期</view>
			</view>
		</view>
		<view class='banner_box'>
			<swiper class='swiper' :previous-margin="width+'px'" next-margin="20px" :current="current" @change="swiperChange">
			 	<swiper-item class='item' v-for="(item,index) in banners" :key="index">
			 		<view class='box' :style="{marginLeft:current==2?left+'px':''}">
						<view class='top'>
							<view class='desc'>5项 可享受以下权益</view>
						</view>
						<view class='fun_wrap'>
							<view class='item' v-for="(item,idx) in funs" :key="idx">
								<view class='img_box' :class="[idx==1?'icon_box':'',idx==3||idx==4?'image_box':'']" :style="{background:index==0?'#CACDD9':index==1?'#F5DAAD':index==2?'#515356':''}">
									<image class='icon' :src="icons[idx]"></image>
								</view>
								<view class='title'>使用年限</view>
								<view class='text'>1年</view>
							</view>
						</view>
					</view>
			 	</swiper-item>
			</swiper>
		</view>
		<view class="agree_wrap">
			<view class='title'>如开通会员即表示您同意如下协议</view>
			<view class='agree_on'>
				<view class='text' @click.stop="nav_go(4)">VIP会员服务协议</view>
				<view class='line'></view>
				<view class='text' @click.stop="nav_go(1)">隐私条款</view>
			</view>
		</view>
		<view class='point'>（家巴啦服务热线：400-886-8956）</view>
		<view class='pay_wrap'>
			<view class='price'><text class='text'>￥</text>{{price[current]}}<text class="text">/年</text></view>
			<view class='btn' @click="pay_ment()">立即开通</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				banners:[1,2,3],
				price: [99,399,699],
				funs: [1,2,3,4,5],
				current: 0,
				userinfo: '',
				left: 0,
				width: 0,
				icons: ['/static/icon64.png','/static/icon65.png','/static/icon66.png','/static/icon67.png','/static/icon68.png'],
				payWays: [],
				paySign: 'wxpay'
			}
		},
		onLoad() {
			var that=this;
			var sysinfo=uni.getSystemInfoSync();
			that.left=Math.floor((sysinfo.windowWidth-sysinfo.windowWidth/(750/640)-40)+3)
			that.width=Math.floor(sysinfo.windowWidth/(750/32))
			that.userinfo=uni.getStorageSync("userIdentity")
			// #ifdef APP-PLUS || MP-WEIXIN
			uni.getProvider({
				service: 'payment',
				success(res) {
					// console.log(res)
					that.payWays=res.provider
				}
			})
			// #endif
		},
		methods:{
			swiperChange(e){
				// console.log(e)
				this.current=e.detail.current
			},
			// 协议
			nav_go(index){
			    uni.navigateTo({
					url: '../../mypage/webView/webView?index='+index
			    })
			},
			// 支付
			pay_ment(){
				// 生成订单支付
				// createOrder().then(res=>{})
				if(this.paySign=='wxpay'){
					uni.requestPayment({
						paySign: 'wxpay',
						timeStamp: String(Date.now()),
						nonceStr: 'A1B2C3D4E5',
						package: 'prepay_id=wx20180101abcdefg',
						signType: 'MD5',
						paySign: '',
						success(res) {
							
						}
					})
				}else{
					uni.requestPayment({
						paySign: 'alipay',
						orderInfo: 'orderInfo',
						success(res) {
							
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #F7F9FB;
		.page_cont{
			width: 100%;
			padding: 32rpx 0 22rpx 0;
			.user_wrap{
				margin: 0 32rpx 32rpx 32rpx;
				background: #fff;
				border-radius: 16rpx;
				display: flex;
				flex-direction: row;
				padding: 40rpx 0;
				.desc{
					flex: 1;
					padding-top: 18rpx;
					.num{
						width: 100%;
						text-align: center;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
						color: #3F4A58;
						margin-bottom: 8rpx;
					}
					.text{
						width: 100%;
						text-align: center;
						height: 34rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 34rpx;
						color: rgba(146,155,167,0.81);
					}
				}
				.img{
					width: 116rpx;
					height: 116rpx;
					border-radius: 50%;
					margin: 0 40rpx;
					border: 2rpx solid rgba(112, 112, 112, 0.1);
				}
			}
			.banner_box{
				width: 100%;
				.swiper{
					width: 100%;
					height: 656rpx;
					.item{
						border-radius: 16rpx;
						.box{
							width: 640rpx;
							border-radius: 16rpx;
							background: #fff;
							// margin: auto;
							.top{
								width: 100%;
								height: 194rpx;
								border-radius: 16rpx;
								box-sizing: border-box;
								padding: 116rpx 0 0 48rpx;
								.desc{
									height: 32rpx;
									font-size: 22rpx;
									font-weight: 600;
									line-height: 32rpx;
								}
							}
							.fun_wrap{
								padding: 40rpx 60rpx 18rpx 60rpx;
								overflow: hidden;
								.item{
									width: 96rpx;
									float: left;
									margin-bottom: 24rpx;
									&:nth-child(3n-1){
										margin: 0 117rpx;
									}
									.img_box{
										width: 88rpx;
										height: 88rpx;
										border-radius: 50%;
										box-sizing: border-box;
										padding: 20rpx 0 0 20rpx;
										.icon{
											width: 48rpx;
											height: 48rpx;
										}
									}
									.icon_box{
										padding: 16rpx 0 0 16rpx;
										.icon{
											width: 56rpx;
											height: 56rpx;
										}
									}
									.image_box{
										padding: 18rpx 0 0 18rpx;
										.icon{
											width: 52rpx;
											height: 52rpx;
										}
									}
									.title{
										text-align: center;
										margin: 20rpx 0 4rpx 0;
										height: 34rpx;
										font-size: 24rpx;
										font-weight: 600;
										line-height: 34rpx;
										color: #424752;
									}
									.text{
										text-align: center;
										height: 32rpx;
										font-size: 22rpx;
										font-weight: 400;
										line-height: 32rpx;
										color: #929BA7;
									}
								}
							}
						}
						&:nth-child(1){
							.top{
								background: url("https://ossdev0.jiabala.com/NGiIAFMwOQPaI")no-repeat 0 0/100% 100%;
								.desc{
									color: #fff;
								}
							}
						}
						&:nth-child(2){
							.top{
								background: url("https://ossdev0.jiabala.com/UoSKEYHecceXq")no-repeat 0 0/100% 100%;
								.desc{
									color: #BF955B;
								}
							}
						}
						&:nth-child(3){
							.top{
								background: url("https://ossdev0.jiabala.com/NMvlHqbiLrtmU")no-repeat 0 0/100% 100%;
								.desc{
									color: #FFEEB8;
								}
							}
						}
					}
				}
			}
			.agree_wrap{
				margin: 32rpx 32rpx 24rpx 32rpx;
				padding: 32rpx;
				background: #fff;
				border-radius: 16rpx;
				.title{
					text-align: center;
					height: 34rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 34rpx;
					color: #929BA7;
					margin-bottom: 24rpx;
				}
				.agree_on{
					display: flex;
					flex-direction: row;
					align-items: center;
					padding-left: 44rpx;
				}
				.text{
					height: 34rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 34rpx;
					color: #929BA7;
					text-decoration: underline;
				}
				.line{
					margin: 0 88rpx;
					height: 34rpx;
					border-left: 2rpx solid rgba(146,155,167,0.5);
				}
			}
			.point{
				text-align: center;
				height: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 34rpx;
				color: #929BA7;
				padding-bottom: 150rpx;
				// margin-bottom: 24rpx;
			}
			.pay_wrap{
				position: fixed;
				bottom: 22rpx;
				left: 0;
				width: 100%;
				height: 128rpx;
				background: #F7F9FB url("https://ossdev0.jiabala.com/yJFEOviwjCfvZ")no-repeat 0 0/100% 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				box-sizing: border-box;
				padding: 18rpx 32rpx;
				.price{
					flex: 1;
					height: 58rpx;
					font-size: 48rpx;
					font-weight: bold;
					line-height: 58rpx;
					color: #5B90FF;
					padding-left: 48rpx;
					.text{
						font-size: 24rpx;
						font-weight: 600;
					}
				}
				.btn{
					width: 286rpx;
					height: 92rpx;
					line-height: 92rpx;
					text-align: center;
					color: #fff;
					font-size: 30rpx;
					font-weight: 400;
				}
			}
		}
	}
</style>
